<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>


<!--外部引入-->
<link rel="stylesheet"
	th:href="@{/libs/bootstrap/bootstrap4dist/css/bootstrap.css}">
<link rel="stylesheet" th:href="@{/css/student/mainpage.css}">
<link rel="stylesheet"
	th:href="@{/libs/bootstrap-table/unpkg.com_bootstrap-table@1.15.3_dist_bootstrap-table.min.css}">

<!-- Favicons -->
<link th:href="@{/libs/niceadmin/assets/img/favicon.png}" rel="icon">
<link th:href="@{/libs/niceadmin/assets/img/apple-touch-icon.png}"
	rel="apple-touch-icon">

<!-- Google Fonts -->



<!-- Vendor CSS Files -->
<link
	th:href="@{/libs/niceadmin/assets/vendor/bootstrap/css/bootstrap.min.css}"
	rel="stylesheet">
<link
	th:href="@{/libs/niceadmin/assets/vendor/bootstrap-icons/bootstrap-icons.css}"
	rel="stylesheet">
<link
	th:href="@{/libs/niceadmin/assets/vendor/boxicons/css/boxicons.min.css}"
	rel="stylesheet">
<link th:href="@{/libs/niceadmin/assets/vendor/quill/quill.snow.css}"
	rel="stylesheet">
<link th:href="@{/libs/niceadmin/assets/vendor/quill/quill.bubble.css}"
	rel="stylesheet">
<link th:href="@{/libs/niceadmin/assets/vendor/remixicon/remixicon.css}"
	rel="stylesheet">
<link
	th:href="@{/libs/niceadmin/assets/vendor/simple-datatables/style.css}"
	rel="stylesheet">

<!-- Template Main CSS File -->
<link th:href="@{/libs/niceadmin/assets/css/style.css}" rel="stylesheet">
<meta charset="UTF-8">
<title>宿舍管理系统</title>
</head>
<body>
	<!-- ======= Header ======= -->
	<div th:replace="public/main :: header"></div>
	<!-- 引用的头 -->
	<!-- End Header -->

	<!-- ======= Sidebar ======= -->
    <aside id="sidebar" class="sidebar" th:fragment="aside">
        <ul class="sidebar-nav" id="sidebar-nav">

        </ul>
    </aside>
    <!-- End Sidebar-->
	<main id="main" class="main">
		<h1>宿舍管理系统</h5>
		<div>
			<div>
				<form>
									<div class="form-group">
										<label for="provinces">区域</label> <select style="width: 250px; height:30px;" id="area">
											<option value="">请选择区域</option>
											<option value="A区">A区</option>
											<option value="B区">B区</option>
											<option value="C区">C区</option>
											<option value="D区">D区</option>
											<option value="E区">E区</option>
										</select>
									
									
										<label for="provinces">楼号</label> <select style="width: 250px; height:30px;" id="buildingNo">
											<option value="">请选择楼号</option>
											<option value="1">1号</option>
											<option value="2">2号</option>
											<option value="3">3号</option>
											<option value="4">4号</option>
											<option value="5">5号</option>
											<option value="6">6号</option>
											<option value="7">7号</option>
											<option value="8">8号</option>
											<option value="9">9号</option>
											<option value="10">10号</option>
											<option value="11">11号</option>
											<option value="11">12号</option>
											<option value="11">13号</option>
											<option value="11">14号</option>
											<option value="11">15号</option>
											<option value="11">16号</option>
											<option value="11">17号</option>
											<option value="11">18号</option>
											<option value="11">19号</option>
											
										</select>
									
								
										<label for="provinces">楼层</label> <select style="width: 250px; height:30px;" id="buildingFloor">
											<option value="">请选择楼层</option>
											<option value="1">1层</option>
											<option value="2">2层</option>
											<option value="3">3层</option>
											<option value="4">4层</option>
											<option value="5">5层</option>
											<option value="6">6层</option>
											<option value="7">7层</option>
											<option value="8">8层</option>
											<option value="9">9层</option>
											<option value="10">10层</option>
											<option value="11">11层</option>
											<option value="12">12层</option>
											<option value="13">13层</option>
											<option value="14">14层</option>
											<option value="15">15层</option>
											<option value="16">16层</option>
											<option value="17">17层</option>
											<option value="18">18层</option>
											<option value="19">19层</option>
											<option value="20">20层</option>
											<option value="21">21层</option>
											<option value="22">22层</option>
										</select>
									</div>
									
					<div class="form-group">
						<label for="dormitoryName">宿舍名称</label> <input type="dormitoryName"
							style="width: 250px; height:30px;" id="dormitoryName" aria-describedby="xxxxxx">
					
						<label for="dormSupervisor">管理员</label> <input type="dormSupervisor"
							style="width: 250px; height:30px;" id="dormSupervisor"
							aria-describedby="yyyyyy">
					
					
						<label for="bedNumber">床位数量</label> <input type="bedNumber"
							style="width: 250px; height:30px;" id="bedNumber" aria-describedby="yyyyyy">
					</div>
					<!-- 查询按钮 -->
					<button type="button" onclick="querydormitory()" class="btn btn-primary">查询</button>
					<!-- 重置查询 -->
					<button type="reset" class="btn btn-primary">重置</button>
					<!-- 新增按钮 -->
					<button type="button" class="btn btn-primary" data-toggle="modal"
						data-target="#addmodal" data-whatever="@mdo">新增</button>
				</form>
			</div>


			<div>
				<table id="table" data-pagination="true" data-page-size="4"
					data-search="true">
					<!--是分页data-pagination="true" data-page-size="4" data-search="true"-->
				</table>
			</div>
			<div>
				<input id="addr" hidden
					th:value="${#httpServletRequest.getScheme()+'://'+#httpServletRequest.getServerName()+':'+#httpServletRequest.getServerPort()+#httpServletRequest.getContextPath()} " />
				<!-- 获取到controller路径 -->
			</div>

			<div>
				<!-- 新增 -->
				<div class="modal fade" id="addmodal" tabindex="-1"
					aria-labelledby="exampleModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalLabel">新增宿舍信息</h5>
								<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<form>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">区域</label>
										<input type="text" class="form-control" id="add-area">
									</div>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">楼号</label>
										<input type="text" class="form-control" id="add-buildingNo">
									</div>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">楼层</label>
										<input type="text" class="form-control" id="add-buildingFloor">
									</div>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">宿舍名称</label>
										<input type="text" class="form-control" id="add-dormitoryName">
									</div>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">床位数量</label>
										<input type="text" class="form-control" id="add-bedNumber">
									</div>
									<div class="form-group">
										<label for="provinces">管理员</label> <select onchange=""
											class="form-control" id="add-dormSupervisor">
											<option>请选择管理员</option>
										</select>
									</div>
									<div class="form-group">
										<label for="provinces">使用状态</label> <select onchange=""
											class="form-control" id="add-useStatus">
											<option value="0">0-正常</option>
											<option value="1">1-空闲</option>
											<option value="2">2-停用</option>
											<option value="3">3-保留</option>
										</select>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary"
									data-dismiss="modal">取消</button>
								<button type="button" onclick="save()" class="btn btn-primary" data-dismiss="modal"	>确认</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div>
				<!-- 修改 -->
				<div class="modal fade" id="updatemodal" tabindex="-1"
					aria-labelledby="exampleModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalLabel">修改宿舍信息</h5>
								<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<form>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">区域</label>
										<input type="text" class="form-control" id="update-area">
									</div>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">楼号</label>
										<input type="text" class="form-control" id="update-buildingNo">
									</div>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">楼层</label>
										<input type="text" class="form-control" id="update-buildingFloor">
									</div>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">宿舍名称</label>
										<input type="text" class="form-control" id="update-dormitoryName">
									</div>
									<div class="form-group">
										<label for="recipient-name" class="col-form-label">床位数量</label>
										<input type="text" class="form-control" id="update-bedNumber">
									</div>
									<div class="form-group">
										<label for="provinces">管理员</label> <select onchange=""
											class="form-control" id="update-dormSupervisor">
											<option>请选择管理员</option>
										</select>
									</div>
									<div class="form-group">
										<label for="provinces">使用状态</label> <select onchange=""
											class="form-control" id="update-useStatus">
											<option value="0">0-正常</option>
											<option value="1">1-空闲</option>
											<option value="2">2-停用</option>
											<option value="3">3-保留</option>
										</select>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary"
									data-dismiss="modal">取消</button>
									<input type="text" class="form-control" hidden="hidden" id="pkId">
								<button type="button" onclick="update()" class="btn btn-primary" data-dismiss="modal">确认</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
		</div>
	</main>
	<!-- ======= Footer ======= -->
	<div th:replace="public/main :: footer"></div>
	<!-- End Footer -->

	<a th:href="@{/libs/niceadmin/#}"
		class="back-to-top d-flex align-items-center justify-content-center"><i
		class="bi bi-arrow-up-short"></i></a>


	<script
		th:src="@{/libs/niceadmin/assets/vendor/apexcharts/apexcharts.min.js}"></script>
	<script
		th:src="@{/libs/niceadmin/assets/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
	<script th:src="@{/libs/niceadmin/assets/vendor/chart.js/chart.min.js}"></script>
	<script
		th:src="@{/libs/niceadmin/assets/vendor/echarts/echarts.min.js}"></script>
	<script th:src="@{/libs/niceadmin/assets/vendor/quill/quill.min.js}"></script>
	<script
		th:src="@{/libs/niceadmin/assets/vendor/simple-datatables/simple-datatables.js}"></script>
	<script
		th:src="@{/libs/niceadmin/assets/vendor/tinymce/tinymce.min.js}"></script>
	<script
		th:src="@{/libs/niceadmin/assets/vendor/php-email-form/validate.js}"></script>

	<!-- Template Main JS File -->
	<script th:src="@{/libs/niceadmin/assets/js/main.js}"></script>



	<!--外部引入-->
	<script th:src="@{/libs/jquery/jquery-3.5.1.js}"></script>
	<script th:src="@{/libs/bootstrap/bootstrap4dist/js/bootstrap.js}"></script>
	<script
		th:src="@{/libs/bootstrap-table/unpkg.com_bootstrap-table@1.15.3_dist_bootstrap-table.min.js}"></script>
	<script
		th:src="@{/libs/bootstrap-table/unpkg.com_bootstrap-table@1.15.3_dist_locale_bootstrap-table-zh-CN.min.js}"></script>
	<script th:src="@{/js/dormitory/dormitory.js}"></script>
	<script th:src="@{/js/public/Menu.js}"></script>
</body>
</html>